<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商户-添加商户</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/merchant.css">
</head>
<body>
<div id="uniocn">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title" style="border-bottom:10px solid #eee ">
            <li class="layui-this">基础信息</li>
            <li>店长信息</li>
            <li>结算提现</li>
        </ul>
        <div class="layui-tab-content" style="padding: 0">
            <div class="layui-tab-item layui-show">
                <p class="add-title">基础信息</p>
                <form action="##" class="layui-form" style="padding: 15px;width: 65%;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            店铺名称
                            <span class="must">*</span>
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入店铺名称"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                店铺排序
                            </label>
                            <div class="layui-input-block">
                                <input type="text"
                                       autocomplete="off" class="layui-input">
                                <p class="tipMust">数字越大排序越靠前</p>
                            </div>

                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                店铺人气
                            </label>
                            <div class="layui-input-block">
                                <input type="text"
                                       autocomplete="off" class="layui-input">
                                <p class="tipMust">当前店铺访问次数</p>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">评分等级</label>
                            <div id="test5"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                店铺电话
                                <span class="must">*</span>
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="call" required lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">营业时间<span class="must">*</span>
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" name="time" required lay-verify="required" class="layui-input" id="test9"
                                   placeholder=" - ">
                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">店铺类别
                                <span class="must">*</span>
                            </label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required">
                                    <option value="">请选择一级分类</option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required">
                                    <option value="">请选择二级分类</option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">店铺logo
                            <span class="must">*</span>
                        </label>
                        <div class="layui-input-block" style="display: flex;justify-content:space-between">
                            <input class="layui-input" type="text" disabled>
                            <button type="button" class="layui-btn layui-btn-primary" id="test1">选择图片</button>
                        </div>
                        <div style="margin-left: 110px">
                            <p class="tipMust">店铺logo,建议使用正方形图片</p>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="demo1">
                                <p id="demoText"></p>
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商户幻灯片
                            <span class="must">*</span>
                        </label>
                        <div class="layui-input-block" style="display: flex;justify-content:space-between">
                            <input class="layui-input" type="text" name="logo" disabled placeholder="批量上传图片"
                                   style="background: #eee">
                            <button type="button" class="layui-btn layui-btn-primary" id="test2">选择图片</button>
                        </div>
                        <div style="margin-left: 110px">
                            <p class="tipMust">店铺幻灯片,在没有店铺全景和视频是调用,建议大小720*300</p>
                            <div class="" style="margin-top: 10px;">
                                <div class="layui-upload-list" id="demo2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商户相册
                            <span class="must">*</span>
                        </label>
                        <div class="layui-input-block" style="display: flex;justify-content:space-between">
                            <input class="layui-input" type="text" disabled placeholder="批量上传图片"
                                   style="background: #eee">
                            <button type="button" class="layui-btn layui-btn-primary" id="test3">选择图片</button>
                        </div>
                        <div style="margin-left: 110px">
                            <p class="tipMust">店铺相册,用于展示店内情况</p>
                            <div class="" style="margin-top: 10px;">
                                <div class="layui-upload-list" id="demo3"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">店铺简介</label>
                        <div style="margin-left: 110px">
                            <textarea id="demo" style="display: none;"></textarea>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">所在区域
                                <span class="must">*</span>
                            </label>

                            <div class="layui-input-inline">
                                <select name="city" lay-verify="required" style="margin-right:10px ">
                                    <option value="">请选择</option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="city" lay-verify="required" style="margin-right:10px ">
                                    <option value="">请选择</option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="city" lay-verify="required" style="margin-right:10px ">
                                    <option value="">请选择</option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">店铺地址<span class="must">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" name="address" required lay-verify="required"
                                   placeholder="请输入店铺详细地址"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">地理位置</label>
                        <div class="layui-input-inline">
                            <input type="text" name="longitude" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <input type="text" name="latitude" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <button class="layui-btn layui-btn-primary">选择位置</button>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: space-between;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商户组
                                <span class="must">*</span>
                            </label>
                            <div class="layui-input-block">
                                <select name="city" lay-verify="required" style="margin-right:10px ">
                                    <option value="">请选择</option>
                                    <option value="0">北京</option>
                                    <option value="1">上海</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">到期时间</label>
                        <div class="layui-input-block">
                            <input type="text" name="endTime"
                                   placeholder=""
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商户状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="bussStates" value="待入驻" title="待入驻" checked>
                            <input type="radio" name="bussStates" value="入驻中" title="入驻中">
                            <input type="radio" name="bussStates" value="暂停中" title="暂停中">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item ">
                <p class="add-title">账号管理</p>
                <form style="padding: 15px" class="layui-form" action="##">
                    <div class="layui-form-item">
                        <label class="layui-form-label">店长姓名</label>
                        <div class="layui-input-block" style="width: 40%;">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入店长姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">店长电话</label>
                        <div class="layui-input-block" style="width: 40%;">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入店长电话"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择微信号</label>
                        <div class="layui-input-block" style="width: 40%;display: flex;">
                            <input type="text" name="title" required lay-verify="required" disabled
                                   autocomplete="off" class="layui-input">
                            <button type="button" class="layui-btn layui-btn-primary chooseWX">选择微信号</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">核销码</label>
                        <div class="layui-input-block" style="width: 40%;">
                            <input type="password" name="title" required lay-verify="required"
                                   placeholder="请输入核销码"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="display: flex;align-items: center">
                        <label class="layui-form-label">店员详情</label>
                        <table class="layui-table" style="width: 40%;">
                            <colgroup>
                                <col width="25%">
                                <col width="25%">
                                <col width="25%">
                                <col width="25%">
                            </colgroup>
                            <tr>
                                <th>姓名</th>
                                <th>电话</th>
                                <th>类型</th>
                                <th>操作</th>
                            </tr>
                        </table>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <p class="add-title">商家提现设置</p>
                <form style="padding: 15px" class="layui-form" action="##">
                    <div class="layui-form-item">
                        <label class="layui-form-label">系统提成</label>
                        <div class="layui-input-block" style="width: 40%;display: flex;">
                            <input type="text" name="title" required lay-verify="required" disabled
                                   autocomplete="off" class="layui-input">
                            <button type="button" class="layui-btn layui-btn-primary chooseWX">%</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="alert" style="padding: 15px;display: none;">
    <form class="layui-form" action="##">
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block" style="width: 65%;display: flex;">
                <input type="text" name="title" required lay-verify="required" placeholder="输入微信昵称或openid或uid"
                       autocomplete="off" class="layui-input">
                <button type="button" class="layui-btn layui-btn-primary">搜索</button>
            </div>
        </div>
        <div class="layui-form-item" style="display: flex;align-items: center">
            <label class="layui-form-label"></label>
            <ul>
                <li>11</li>
                <li>11</li>
                <li>11</li>
            </ul>
        </div>
    </form>
</div>
<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script src="./js/public.js"></script>
<script src="./js/data.js"></script>
<script>
    new Vue({
        el: "#uniocn",
        data: {
            header: data.header,
            side: data.side,
        }
    })
    layui.use(['layer', 'form'], function () {
        var form = layui.form;
        var layer = layui.layer;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
    $('.chooseWX').click(function () {
        layer.open({
            title: "选择微信账号",
            type: 1,
            area: ['720px'], //宽高
            content: $('.alert'),
            btn: "关闭"
        });
    })
</script>
</body>
</html>